<template>
	<uv-popup ref="popupRef" mode="center" :zoom="false" round="28rpx" @close="handClose">
		<view class="canvas">
			<view style="height: 788rpx;">
				<l-painter ref="painter">
					<l-painter-view css="position: relative; width: 620rpx; height: 788rpx">
						<l-painter-image src="https://wuyeshop.oss-cn-beijing.aliyuncs.com/images/169052246273935.png"
							css="width: 620rpx; height: 788rpx" />
						<l-painter-image :src="qrImg"
							css="width: 234rpx; height: 234rpx; position: absolute; left: 196rpx; bottom: 58rpx" />
					</l-painter-view>
				</l-painter>
			</view>

			<button class="cu-btn" @click="handSave">立即保存</button>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		doQrCode
	} from '@/apis/user.js'

	const painter = ref(null)
	const handSave = () => {
		painter.value.canvasToTempFilePathSync({
			fileType: "png",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			quality: 1,
			success: (res) => {
				console.log(res.tempFilePath);
				// 非H5 保存到相册
				// H5 提示用户长按图另存
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function() {
						console.log('save success');
					}
				});
			},
		});
	}

	const qrImg = ref('')
	const popupRef = ref(null)
	const handOpen = async () => {
		uni.showLoading({
			title: '生成中...'
		})
		const data = await doQrCode()
		qrImg.value = data.codeUrl
		uni.hideLoading()
		popupRef.value.open()
	}
	const handClose = () => {
		popupRef.value.close()
	}
	defineExpose({
		handOpen
	})
</script>

<style lang="scss" scoped>
	.canvas {
		width: 620rpx;
		position: relative;
		padding-bottom: 50rpx;

		.cu-btn {
			width: 500rpx;
			height: 88rpx;
			margin: 20rpx 60rpx 0 60rpx;
			background: #FDC234;
		}
	}
</style>